﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#boxA, #boxB, #boxC { 
  float:left; width:200px; height:200px; padding:10px; margin:10px;
}

#boxA { background-color: skyblue; }
#boxB { background-color: green; }
#boxC { background-color: yellow; }

#drag, #drag2 {
  width:50px; height:50px; padding:5px; margin:5px;
  -moz-user-select:none;
  color:white;
}
#drag { background-color: red;}
#drag2 { background-color: blue;}
</style>

<script type="text/javascript">

function dragStart(ev) {
    ev.dataTransfer.effectAllowed='move';
    ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
    ev.dataTransfer.setDragImage(ev.target,0,0);
    return true;
}

function dragEnter(ev) {
    var idelt = ev.dataTransfer.getData("Text");
    return true;
}

function dragOver(ev) {
    var idelt = ev.dataTransfer.getData("Text");
    var id = ev.target.getAttribute('id');

    if( id =='boxB' && idelt == 'drag') {
	return false;

    } else if( id =='boxC' && idelt == 'drag2'){
        return false;

	} else if ((id =='boxA') && (idelt == 'drag' || idelt == 'drag2')){
		return false;

    	} else{
        	return true;
   	}
}

function dragEnd(ev) {
    ev.dataTransfer.clearData("Text");
    return true
}

function dragDrop(ev) {
    var idelt = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(idelt));
    ev.stopPropagation();
    return false; 
}

</script>

</head>

<body>
    <div id="boxA"
        ondragenter="return dragEnter(event)"
        ondrop="return dragDrop(event)"
        ondragover="return dragOver(event)">

      <div id="drag" draggable="true"
            ondragstart="return dragStart(event)"
            ondragend="return dragEnd(event)">drag me</div>

      <div id="drag2" draggable="true"
            ondragstart="return dragStart(event)"
            ondragend="return dragEnd(event)">drag me</div>

    </div>

    <div id="boxB"
        ondragenter="return dragEnter(event)"
        ondrop="return dragDrop(event)"
        ondragover="return dragOver(event)">
    </div>
    <div id="boxC"
        ondragenter="return dragEnter(event)"
        ondrop="return dragDrop(event)"
        ondragover="return dragOver(event)">
    </div>
    <div style="clear:both">빨간 사각형은 '초록색'으로만 옮길 수 있고, 파란색 사각형은 '노란색'으로만 옮길 수 있습니다.<br /> 두가지 사각형은 모두 원래 위치로 옮길 수 있습니다.</div>

</body>
</html>
